<template>
    <!-- 列表商品组件 -->
    <div class="commodity_list">
        <div class="list_top">
            <div class="list_top_img">
                <van-image radius="5"
                    :src="data?.productImages ? data?.productImages + '?x-oss-process=image/resize,w_300' : ''" />
                <img src="" alt="">
                <div class="list_top_img_tag" v-if="data?.hmMechanismsList[1]?.cooperationMode">多机制</div>
            </div>
            <div class="list_top_right">
                <div class="list_top_right_title">
                    <div class="title">{{ data?.styleName }}</div>
                    <div v-if="type === '招商选品'" class="tag"
                        :style="computedAtatusColor(auditStatusNameById(data?.auditStatus))">{{
                            auditStatusNameById(data?.auditStatus) }}</div>
                    <div v-else :class="`tag ${isTagClass(data?.status)}`">
                        {{ data?.status }}</div>
                </div>
                <div class="list_top_right_introduce">{{ data?.sellingPoints }}</div>
                <div class="list_top_right_money">
                    <div class="money_left">
                        <div v-if="data?.hmMechanismsList[0].cooperationMode === '分佣'">
                            ￥<span>{{ data?.hmMechanismsList[0].price }}</span>
                        </div>
                        <div v-else>
                            ￥<span>{{ data?.hmMechanismsList[0].costPrice }}</span>
                        </div>
                        <div v-if="data?.hmMechanismsList[0].cooperationMode === '分佣'" class="commission">
                            <span class="fonts">佣</span>
                            <span class="numbers">
                                {{ data?.hmMechanismsList[0].commission }}%
                            </span>
                        </div>
                    </div>
                    <div class="money_right">
                        {{ data?.hmMechanismsList[0].liveStreamingMechanism }}
                    </div>
                </div>
                <div class="list_top_right_bottom">
                    <div class="inventory">
                        <span class="fonts">库存</span>
                        <span class="numbers">{{ data?.stockAvailable || 0 }}件</span>
                    </div>
                    <div class="times">{{ type === '招商选品' ? data?.selectionTime : data?.outTime }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
defineProps({ data: { type: Object, default: () => { } }, type: { type: String, default: '' } })


const auditStatus = {
    '0': '未邮寄',
    '1': '邮寄中',
    '2': '待收货',
    '3': '机制待确认',
    '4': '确认收货',
    '5': '已上架',
    '6': '待初审',
    '7': '初审中',
    '8': '初审驳回',
    '9': '初审驳回',
    '10': '初审驳回',
    '11': '复审中',
    '12': '复审驳回',
    '13': '复审通过',
    '14': '无合同驳回',
    '15': '待入库',
    '16': '入库中',
    '17': '入库驳回',
    '18': '入库通过',
    '19': '入库通过',
    '20': '入库通过',
    '21': '入库通过',
    '22': '无合同审批中',
    '-1': '已下架',
    '-2': '已退还',
    '-3': '总监复核驳回',
    '-4': '总监复核中',
    '-5': '已选品',
    '-6': '已上架',
    '-7': '待上架',
    '-8': '总监审批驳回',
    '-9': '总监审批中',
    '-10': '组长审批驳回',
    '-11': '组长审批中',
    '-12': '组长待审',
};

const auditStatusNameById = (id: string) => {
    return auditStatus[id] ?? '未知状态';
};
/** 设置不同状态不同样式 */
const computedAtatusColor = (name: any) => {
    if (name.includes('待')) {
        return { backgroundColor: '#EBF4FF', color: '#0094FF' }
    } else if (name.includes('驳回') || name == '已下架' || name == '已退还') {
        return { backgroundColor: '#FDE7E7', color: '#FC2540' }
    } else {
        return { backgroundColor: '#E7FDEE', color: '#19D11B' }
    }
}
const isTagClass = (status: string) => {
    if (status) {
        if (status === '已归还') {
            return 'tag_lv'
        } else if (status === '超期归还') {
            return 'tag_huang'
        } else if (status.includes('已选')) {
            return 'tag_lan'
        } else if (status.includes('超期')) {
            return 'tag_red'
        }
    }
}
</script>

<style lang="less" scoped>
@import url(@/views/operation/operationHomeList/components/style/index.less);
</style>